<template>
  <div class="register">
      <transition name="cc">
          <div class="content" v-show="show" >
              <div class="form-box">
                <div class="head"></div>
                  <van-form @submit="onSubmit">
                  <van-field
                    v-model="username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    left-icon="user-o"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        left-icon="lock"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="info" color="black" native-type="submit">提交</van-button>
                    </div>
                 </van-form>                  
                  
              <div class="tips">
                  <span @click="tipsHandler">忘记密码了吗？ 注册一个新账号</span>
                  <div class="back" @click="navBack">返回上一页面</div>
              </div>
              </div>
          </div>
      </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      show:false
    };
  },
  methods: {
    async onSubmit(values) {
        let result = await this.$api.user.reqLogin(values)
        if(result.status != 200){
           return this.$toast.fail(result.message)
        }
        let userInfo = JSON.stringify(result.data.userInfo)
        sessionStorage.setItem('token',result.data.token)
        sessionStorage.setItem('userInfo',userInfo)
        this.$toast.success('登陆成功')
        this.navBack()
    },
    navBack(){
        this.show = false
        setTimeout(()=>{
        this.$router.back(1)
            
            
        },500)        
    },
    tipsHandler(){
        this.$toast.fail('暂未开放注册')
    }
  },
  mounted(){
      this.show=true
  }
};
</script>

<style lang="less" scoped>
@import './index.less';


</style>